//style with variables
@import 'theme';
@import 'functions';
@import 'mixins';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/nav';

//search-box color variables
$cx-search-box-group-background-color: 'secondary' !default;
$cx-search-box-group-xs-background-color: 'transparent' !default;
$cx-search-box-input-placeholder-color: 'inverse' !default;
$cx-search-box-input-background-color: 'transparent' !default;
$cx-search-box-input-mobile-background-color: 'secondary' !default;
$cx-search-box-input-focus-background-color: 'transparent' !default;
$cx-search-box-input-mobile-focus-background-color: 'secondary' !default;
$cx-search-box-input-color: 'inverse' !default;
$cx-search-box-input-focus-color: 'inverse' !default;
$cx-search-box-button-background-color: 'transparent' !default;
$cx-search-box-button-icon-fill-color: 'inverse' !default;
$cx-search-box-item-background-color: 'primary' !default;

//search-box variables
$cx-search-box-group-trbl-margin: auto !default;
$cx-search-box-input-border: 0 none !default;
$cx-search-box-input-width-xl: 22rem !default;
$cx-search-box-input-width-lg: 18rem !default;
$cx-search-box-input-width-md: 16rem !default;
$cx-search-box-input-width-sm: 7rem !default;
$cx-search-box-input-width-xs: auto !default;
$cx-search-box-input-radius: 0 !default;
$cx-search-box-input-margin-bottom: 0 !default;
$cx-search-box-input-trbl-padding: 0 !default;
$cx-search-box-button-border: 0 none !default;
$cx-search-box-button-padding: 5px !default;
$cx-search-box-button-margin: 5px !default;
$cx-search-box-search-icon-width: 28px !default;
$cx-search-box-search-icon-height: 28px !default;

.cx-search-box {
  @include media-breakpoint-down(xs) {
    margin: 0;
  }

  &__group {
    @include var-color(
      'background-color',
      $cx-search-box-group-background-color
    );
    padding: $cx-search-box-input-trbl-padding;
    display: flex;
    margin: $cx-search-box-group-trbl-margin;

    @include media-breakpoint-down(xs) {
      @include var-color(
        'background-color',
        $cx-search-box-group-xs-background-color
      );
    }
  }

  &__form {
    display: inline-block;
    vertical-align: middle;
  }

  &__input {
    @include placeholder {
      @include var-color('color', $cx-search-box-input-placeholder-color);
    }

    @include var-color(
      'background-color',
      $cx-search-box-input-background-color
    );
    @include var-color('color', $cx-search-box-input-color);
    border: $cx-search-box-input-border;
    border-radius: $cx-search-box-input-radius;
    margin-bottom: $cx-search-box-input-margin-bottom;
    z-index: 1;

    &[aria-label='search'] {
      &:focus {
        @include var-color(
          'background-color',
          $cx-search-box-input-focus-background-color
        );
        @include var-color('color', $cx-search-box-input-focus-color);
        box-shadow: none;
      }

      @include media-breakpoint-down(xl) {
        width: $cx-search-box-input-width-xl;
      }

      @include media-breakpoint-down(lg) {
        width: $cx-search-box-input-width-lg;
      }

      @include media-breakpoint-down(md) {
        width: $cx-search-box-input-width-md;
      }

      @include media-breakpoint-down(sm) {
        width: $cx-search-box-input-width-sm;
      }

      @include media-breakpoint-down(xs) {
        @include var-color(
          'background-color',
          $cx-search-box-input-mobile-background-color
        );
        @include var-color('color', $cx-search-box-input-color);
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;

        &:focus {
          @include var-color(
            'background-color',
            $cx-search-box-input-mobile-focus-background-color
          );
          @include var-color('color', $cx-search-box-input-color);
        }

        & + .dropdown-menu {
          width: 100%;
          margin-top: 0;
          border-radius: 0;
          border: 0;
        }
      }
    }

    &.show-mobile {
      display: block;
    }
  }

  &__button {
    border: $cx-search-box-button-border;
    padding: $cx-search-box-button-padding;
    margin: $cx-search-box-button-margin;

    &-desktop {
      @include media-breakpoint-down(xs) {
        display: none;
      }
    }

    &-mobile {
      display: none;

      @include media-breakpoint-down(xs) {
        display: block;
      }
    }

    @include var-color(
      'background-color',
      $cx-search-box-button-background-color
    );
  }

  &__icon {
    width: $cx-search-box-search-icon-width;
    height: $cx-search-box-search-icon-height;
    @include var-color('fill', $cx-search-box-button-icon-fill-color);
    pointer-events: none;
  }

  &__dropdown-content {
    @include media-breakpoint-down(xl) {
      width: $cx-search-box-input-width-xl;
    }

    @include media-breakpoint-down(lg) {
      width: $cx-search-box-input-width-lg;
    }

    @include media-breakpoint-down(md) {
      width: $cx-search-box-input-width-md;
    }

    @include media-breakpoint-down(sm) {
      width: $cx-search-box-input-width-sm;
    }

    @include media-breakpoint-down(xs) {
      width: $cx-search-box-input-width-xs;
    }

    &-product {
      display: flex;

      cx-picture {
        min-width: 80px;
        width: 80px;
        flex-shrink: 0;
      }

      &-name {
        padding: 0 15px;
        flex-grow: 1;
        flex-shrink: 1;
        height: 80px;
        display: flex;
        align-items: center;
        overflow: hidden;
      }

      &-price {
        text-align: right;
        align-self: center;
        flex-shrink: 0;
      }
    }
  }

  .dropdown-menu .dropdown-item.active {
    @include var-color(
      'background-color',
      $cx-search-box-item-background-color
    );
  }
}
